<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>子组件传值给父组件</title>
</head>
<body>
<!-- 父组件 -->
<div id="app">
    <h1>父组件的值是：{{parentmsg}}</h1>
    <h1>子组件传递给父组件的值是：{{msg}}</h1>
    <child @change="sonval"></child>
</div>
<!-- 子组件 -->
<template id="sontem">
    <div>
        <h2>子组件的值是：{{sonmsg}}</h2>
        <button @click="sonfn">子传父</button>
    </div>
</template>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data(){
            return {
                parentmsg: "PARENT",
                msg: ""
            }
        },
        methods: {
sonval: function(val){
    this.msg = val;
}
    },
    components: {
        "child": {
            template: "#sontem",
                data(){
                return {
                    sonmsg: "SON"
                }
            },
            methods: {
                sonfn: function(){
                    this.$emit("change",this.sonmsg);
                }
            }
        }
    }
    })
</script>